<template>
    <div class="containar">
       <div class="nav_top">
           userNmae:{{$store.state.userName}},password:{{$store.state.password}}

       </div>
       <div class="nva_menu">
           <router-link to="/home?ps=test">home</router-link>
           <router-link to="/about/123">about</router-link>
           <router-link to="/user/admin">user</router-link>
           <router-link to="/user/管理员">user管理员</router-link>
           <router-link :to="{name:'home',query:{ps:'命名路由'}}">命名路由</router-link>
           <a href="javascript:void(0)" @click="toHome('/home')">ToHome</a>
           <router-link to="/r">重定向Home</router-link>
       </div>
       <div class="content">         
           <transition>  
          <router-view></router-view>
           </transition>
       </div>
    </div>
</template>

<script>
import Vue from 'vue';


export default {
  name: 'app',
  data () {
    return {
      
    }
  },
  methods:{
      toHome(path){
          if(this.$route.fullPath!=path){
             this.$router.push(path);
          }
      }
  }
}
</script>


<style lang="scss">
    body{
        padding: 0; 
        margin: 0;
    }
   .containar{ 
        position:fixed;
        width: 100%;
        height: 100%;
        background: #ccc;
        .nav_top{
            height: 50px; 
            overflow: hidden;
            background: #eee;
        }
        .nva_menu{
            position: fixed;
            top:50px; 
            bottom: 0px; 
            width: 200px;
            overflow: auto;
            background:rgb(104, 105, 104);
            padding-top:10px;
            padding-left:10px;
            &>a{
               display: inline-block;
               width: 100%;
               margin: 10px;
               text-decoration: none;
               &:hover{color:red;}
            }
        }
        .content{
            position: fixed;
            top:50px;
            left: 200px; 
            right: 0px; 
            bottom: 0px;
            overflow: auto; 
            background: white;
        }
   }   
</style>
